<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <span>1</span>
    <div class="box" abc="这是abc" title="这是title">
        <span>1</span>
        <!-- 这是注释 -->
        <span>2</span>
        这是文本
        <span>3</span>
    </div>
    <em>1</em>
</body>
<script>

    var oBox = document.querySelector(".box")

    // 所有子节点
    console.log( oBox.childNodes );

    // 第一个子节点
    console.log( oBox.firstChild );
    
    // 最后一个子节点
    console.log( oBox.lastChild );

    // 上一个兄弟节点
    console.log( oBox.previousSibling );

    // 下一个兄弟节点
    console.log( oBox.nextSibling );

    // 属性节点
    console.log( oBox.attributes );

    // 根节点
    console.log( oBox.ownerDocument );
    console.log( document );
    
</script>
</html>